import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Tabs, message } from 'antd';
import { UserOutlined, LockOutlined, CopyrightOutlined } from '@ant-design/icons';
import { http, history, navigate } from 'libs';
import moment from "dayjs";
import styles from './login.module.less';
import logoIcon from './logo.png';

export default function Login() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [type, setType] = useState('password')
  const [second, setSecond] = useState(0)

  const items = [
    { label: '账号密码登录', key: 'password' },
    { label: '手机验证码登录', key: 'msg' },
  ];

  useEffect(() => {
    if (second) {
      setTimeout(() => {
        setSecond(second - 1)
      }, 1000);
    }
  }, [second])

  function getCode() {
    let tel = form.getFieldValue('username')
    if (!tel) {
      return message.error('请输入手机号')
    }
    http.get('/api/user/login/')
      .then(() => {
        setSecond(60)
        message.success('验证码发送成功')
      })

  }

  // 点击：登录请求
  function handleSubmit(formData) {
    setLoading(true);
    http.post('/api/user/login/', formData)
      .then(data => {
        localStorage.setItem('token', data['access_token']);
        localStorage.setItem('nickname', data['nickname']);
        localStorage.setItem('is_super', data['is_super']);
        if (history.location.state && history.location.state['from']) {
          navigate(history.location.state['from'], { replace: true })
        } else {
          navigate('home', { replace: true })
        }
      })
      .finally(() => setLoading(false))
  }

  return (
    <div className={styles.container}>
      <div className={styles.section}>
        <div className={styles.inner}>
          <h1><img className={styles.logoIcon} src={logoIcon || ''} alt="" />ERP系统</h1>
          {/*<Tabs items={items} activeKey={type} onChange={setType} />*/}
          <div className={styles.formContainer}>
            <Form form={form} onFinish={handleSubmit}>
              <Form.Item name="username" className={styles.formItem} rules={[{ required: true, message: '请输入手机号' }]}>
                <Input
                  size="large"
                  autoComplete="new-password"
                  placeholder="请输入手机号"
                  prefix={<UserOutlined className={styles.icon} />} />
              </Form.Item>
              {
                type === 'msg' ?
                  <Form.Item name="code" rules={[{ required: true, message: '请输入短信验证码' }]}>
                    <Input
                      size="large"
                      placeholder="请输入短信验证码"
                      addonAfter={
                        second ? <span>{second}秒后重新获取</span> : <Button type='link' onClick={getCode}>获取验证码</Button>
                      }
                      prefix={<LockOutlined className={styles.icon} />} />
                  </Form.Item>
                  :
                  <Form.Item name="password" className={styles.formItem} rules={[{ required: true, message: '请输入密码' }]}>
                    <Input
                      size="large"
                      type="password"
                      autoComplete="new-password"
                      placeholder="请输入密码"
                      prefix={<LockOutlined className={styles.icon} />} />
                  </Form.Item>
              }

              <Form.Item style={{ paddingTop: 10 }}>
                <Button block size="large" type="primary" htmlType="submit" loading={loading}>登录</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
      <div className={styles.footer}>
        Copyright <CopyrightOutlined /> {moment().get('year')} By vERP
      </div>
    </div>
  )
}
